// 基于准备好的dom，初始化echarts实例
var myChart3 = echarts.init(document.getElementById('down'),'macarons');


var seriesdata1 = [


    [
        30,
        40,
        30,
        28,
        35,
        45,
        20,
        30,
        40,
        60,
        30
    ],
    [
        40,
        30,
        40,
        45,
        32,
        35,
        40,
        40,
        30
    ]
];
//var xAxisdata1 = [
//    "2018-01-01",
//    "2018-01-02",
//    "2018-01-03",
//    "2018-01-04",
//    "2018-01-05",
//    "2018-01-06",
//    "2018-01-07",
//    "2018-01-08",
//    "2018-01-09",
//    "2018-01-10",
//    "2018-01-11",
//    "2018-01-12",
//    "2018-01-13",
//    "2018-01-14",
//    "2018-01-15",
//    "2018-01-16",
//    "2018-01-17",
//    "2018-01-18",
//    "2018-01-19",
//    "2018-01-20",
//    "2018-01-21",
//    "2018-01-22",
//    "2018-01-23",
//    "2018-01-24",
//    "2018-01-25",
//    "2018-01-26",
//    "2018-01-27",
//    "2018-01-28",
//    "2018-01-29",
//    "2018-01-30",
//    "2018-01-31"
//];
InitChart( seriesdata1);
function InitChart(ser){
    // 指定图表的配置项和数据
    var option = {
        tooltip : {
            trigger: 'axis',
            axisPointer: {
                type: 'cross',
                label: {
                    backgroundColor: '#6a7985'
                }
            }

        },
        color:['#7affff','#ffff87'],
        legend:[

            {
                show:true,
                orient:'horizontal',
                x:'center',
                top:'3%',
                itemGap: 30,
                data:['XXXXX2','XXXXX1'],
                textStyle:{
                    color:'#fff',
                    fontSize:40
                }
            }

        ],
        toolbox: {
            feature: {
                saveAsImage: {}
            }
        },
        grid: {
            left: '50',
            right: '80',
            bottom: '3%',
            containLabel: true
        },
        xAxis : [
            {
                type : 'category',
                boundaryGap : false,
                data:['2018/01','2018/02','2018/03','2018/04','2018/05','2018/06','2018/07'],
                axisLabel:{
                    show:true,
                    textStyle: {
                        color: '#fff',
                        fontSize:40
                    }

                },
                axisLine:{
                    lineStyle:{
                        color: '#56f0ed',
                        width:5
                    }
                }
            }
        ],
        yAxis :
        {
            name:'(%)',
            type : 'value',
            nameTextStyle:{
                color:"#fff",
                fontSize:40
            },
            min : 0,
            max:100,
            interval:10,
            axisLabel: {
                show: true,
                //interval: 'auto',
                //formatter: '{value}%',
                //position: 'left',
                //nameLocation: 'middle',
                //nameGap: 35,
                textStyle: {
                    color: '#fff',
                    fontSize:40
                }
            },
            show: true,
            splitLine:{
                show:false
            },
            axisLine:{
                lineStyle:{
                    color: '#56f0ed',
                    width:5

                }
            }
        },

        series : [
            {
                name:'XXXXX2',
                type:'line',
                symbol: 'circle',
                symbolSize:25, //拐点圆的大小
                //smooth:true,
                //stack: '总量',
                areaStyle: {
                    color: new echarts.graphic.LinearGradient(
                        0, 0, 0, 1,
                        [
                            {offset: 0, color: 'rgb(122, 255, 255,0.3)'},
                            {offset: 0.3, color: 'rgb(122, 255, 255,0.3)'},
                            {offset: 0.5, color: 'rgb(122, 255, 255,0.2)'},
                            {offset: 0.8, color: 'rgb(122, 255, 255,0.1)'},
                            {offset: 0.9, color: 'rgb(122, 255, 255,0)'},
                            {offset: 1, color: 'rgb(122, 255, 255,0)'}
                        ]
                    )
                },
                //data:[20, 30, 100, 60, 40, 80, 40, 50],
                markLine: {
                    symbol: ['none', 'none'],//去掉箭头

                    silent: true,
                    itemStyle: {
                        normal: { lineStyle: {width:1, type: 'solid', color:'#ccc' },label: { show: true, position:'left' } }
                    },
                    data:[
                        { name: '最小值',yAxis:0},
                        { name: '最大值',yAxis:90}
                    ]
                    //data:[{yAxis: 20},{yAxis: 40}]
                },
                data:ser[0],
                lineStyle: {
                    normal: {
                        width: 5,
                        color: 'rgb(104, 180, 243)'
                    }
                },
                itemStyle:{
                    normal: {
                        color: 'rgb(104, 180, 243)',
                        barBorderRadius: 5
                    }
                }
            },
            {
                name:'XXXXX1',
                type:'line',
                //showSymbol: false,
                symbol: 'circle',
                symbolSize:25, //拐点圆的大小
                //smooth:true,
                //stack: '总量',
                areaStyle: {
                    color: new echarts.graphic.LinearGradient(
                        0, 0, 0, 1,
                        [
                            {offset: 0, color: 'rgb(255, 255, 135,0.3)'},
                            {offset: 0.3, color: 'rgb(255, 255, 135,0.3)'},
                            {offset: 0.5, color: 'rgb(255, 255, 135,0.2)'},
                            {offset: 0.8, color: 'rgb(255, 255, 135,0.1)'},
                            {offset: 0.9, color: 'rgb(255, 255, 135,0)'},
                            {offset: 1, color: 'rgb(255, 255, 135,0)'}
                        ]
                    )
                },
                //data:[40, 50, 80, 75, 30, 55, 60, 20],
                markLine: {
                    symbol: ['none', 'none'],//去掉箭头
                    silent: true,
                    itemStyle: {
                        normal: { lineStyle: {width:1, type: 'solid', color:'#ccc' },label: { show: true, position:'left' } }
                    }
                    //data:[{yAxis: 60},{yAxis: 80},{yAxis: 100}]
                },
                data:ser[1],
                lineStyle: {

                    normal: {
                        width: 5,
                        color:'rgb(242, 255, 185)'
                    }
                },
                itemStyle:{
                    normal: {
                        barBorderRadius: 5,
                        color: 'rgb(242, 255, 185)'
                    }
                }
            }
        ]
    };
// 使用刚指定的配置项和数据显示图表。
    myChart3.setOption(option);
    window.onresize = function() {//监听div和屏幕的改变
        myChart3.resize();//resize属性指定一个元素是否是由用户调整大小的。
    }

}
    setInterval(alertFunc, 5000);
    function alertFunc(){
        var op = myChart3.getOption();
        var opData0 = op.series[0].data;
        var opData1 = op.series[1].data;
        //opData0.shift();
        //opData1.shift();
        op.series[0].data.push(opData0.shift());
        op.series[1].data.push(opData1.shift());

        //op.xAxis[0].data.shift();
        //console.log(op.xAxis[0].data);
        myChart3.setOption(op);

    }




